<template>
  <div>
    <p>{{$route.params.name}}-商品详情</p>
    <p>名称：{{$route.params.name}}</p>
    <hr>
    <router-link to="/goodsdetail/OPPO Reno Ace">OPPO Reno Ace</router-link>
    <p>点击OPPO Reno Ace时，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      
    }
  },
  created() {
    this.getDataByName();
  },
  // watch: {
  //   $route() {
  //     // console.log(to);
  //     // console.log(from);
  //     this.getDataByName();
  //     // console.log('我正在获取'+to.params.name+'的数据');
  //   }
  // },
  // 路由的钩子函数
  beforeRouteUpdate(to, from, next) {
    console.log(to);
    console.log(from);
    // 中间件的执行权，继续向后执行
    next()
  },
  methods: {
    getDataByName() {
      console.log('我正在获取'+this.$route.params.name+'的数据');
    }
  },
}
</script>

<style>

</style>